@push('title')
    <title>去哪比价</title>
@endpush
@push('style2')
    <style>

        .layui-form-label {
            width: 200px;
        }
    </style>

@endpush
@push('style2')

    @extends('layout.layer')
    @section('content')

        <form class="layui-form layui-form-pane1" action="#" lay-filter="first" style="margin-bottom: 15px">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">航班号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="flightNo" placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">出发：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dpt" value=""  lay-verify="required" maxlength="3" placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">到达：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="arr" value=""  lay-verify="required" maxlength="3" placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">航班日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="flightDate" value="" id="flightDate" lay-verify="required" placeholder="政策旅行日期" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">舱位：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="cabin" maxlength="50" placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">航司二字码：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="carrier" maxlength="3" placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品类型：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="productMark"  value=""  placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">域名：</label>
                    <div class="layui-input-inline">
                        <select name="domain" lay-filter="">
                            <option value="agb.trade.qunar.com">agb.trade.qunar.com</option>
                            <option value="ajp.trade.qunar.com">ajp.trade.qunar.com</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 15px">
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <button class="layui-btn" id="search-btn" lay-submit lay-filter="*">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>

        <table id="list" lay-filter="list"></table>

    @endsection
    @push('script')
        <script>
            layui.use(['table','form','laydate'], function() {

                var table = layui.table;
                var laydate = layui.laydate;
                var form = layui.form;

                //执行一个laydate实例
                laydate.render({
                    elem: '#flightDate' //指定元素
                });

                //日期转发
                var dateSwitch = function (timestamp) {

                    console.log(timestamp);
                    var date = new Date(timestamp);
                    var year = date.getFullYear();
                    var month = ("0" + (date.getMonth() + 1)).slice(-2);
                    var day = ("0" + date.getDate()).slice(-2);
                    var formattedDate = year + "-" + month + "-" + day;
                    console.log(formattedDate);
                    return formattedDate;
                }

                //第一个实例
                table.render({
                    id: 'list'
                    , elem: '#list'
                    , url: '/compare/ajaxQn'
                    , page: false //开启分页
                    ,limit: 10000
                    ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        if(res.errcode != null && res.errcode != 0){ // 判断数据是否为空

                            layer.msg(res.errmsg, {
                                offset: '15px'
                                ,icon: 5
                                ,time: 2000
                            });
                        }

                        return {
                            "code": res.errcode, //解析接口状态
                            "msg": res.errmsg, //解析提示文本
                            "data":res.data,
                            "count": res.data.length, //解析数据长度
                        };
                    }
                    , cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' }
                        , {type: 'numbers',title: '序号', width: 80, sort: true, fixed: 'left'}
                        , { field: 'flightDate', title: '日期', sort: true}
                        , { field: 'dep', title: '出发机场' }
                        , { field: 'arr', title: '到达机场' }
                        , { field: 'flightNo', title: '航班' }
                        , { field: 'cabin', title: '舱位' }
                        , { field: 'priceType', title: '报价类型', sort: true}
                        , { field: 'sellPrice', title: '外放低价', sort: true }
                        , { field: 'sellFloorPrice', title: '外放追价底价', sort: true }
                        , { field: 'selfPrice', title: '自有政策', sort: true,templet: function (row) {
                                if(row.selfPrice > 0) return row.selfPrice;
                                return '';
                            } }
                        , { field: 'NoResultReason', title: '建议价格', sort: true }
                        , { field: 'selfCabin', title: '自有政策舱位', sort: true}
                        , { field: 'reason', title: '未展示原因', sort: true }
                        /*, { field: 'wealth5', title: '操作', sort: true }*/
                    ]],
                    done: function (res, curr, count) {
                        var that = this.elem.next();
                        res.data.forEach(function (item, index) {
                            if (item.tipRed === true) {
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("color", "red");
                            }
                        });
                    },
                });

                //监听提交
                form.on('submit(*)', function(data){

                    table.reload('list',{
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where:data.field
                    });

                    return false;
                });

                // 监听表格复选框选择
                table.on('checkbox(list)', function (obj) {
                    var checkStatus = table.checkStatus('demo'); // 获取表格的选中状态
                    console.log(checkStatus.data); // 打印选中的数据
                    console.log(obj.checked); // 当前是否选中
                    console.log(obj.data); // 当前行的数据
                });
            });
        </script>

    @endpush